<template>
  <div class="app-container">
    <div class="classify flex">
      <div @click="changePage" v-for="item in classifyList" class="classifyItem" :class="{ active: item.active }">{{ item.label }}</div>
    </div>
    <main class="mt10 flex" v-if="classifyList[0].active === true">
      <div class="flex">
        <div class="tree">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
        <div>
          <el-card shadow="never" :body-style="{ padding: '72px 110px 0px' }">
            <div slot="header"><span class="f16" style="font-weight: 600">新增分类</span>``</div>
            <div class="flex add">
              <div class="flex item">
                <span class="f14" style="width: 90px">分类编码</span>
                <el-input class="input" placeholder="请输入分类编码" />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">分类名称</span>
                <el-input class="input" placeholder="请输入分类名称" />
              </div>
              <div class="flex item btn">
                <el-button type="primary" size="default" @click="" class="primaryBth">新增</el-button>
                <el-button type="primary" size="default" @click="" class="primaryBth">删除</el-button>
              </div>
            </div>
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '72px 110px 0px' }">
            <div slot="header"></div>
            <div class="flex add">
              <div class="flex item">
                <span class="f14" style="width: 90px">分类编码</span>
                <el-input class="input" placeholder="" disabled />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">分类名称</span>
                <el-input class="input" placeholder="" disabled />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">备注</span>
                <el-input class="input" placeholder="" disabled />
              </div>
            </div>
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '72px 110px 20px' }">
            <div slot="header">
              <span class="f16" style="font-weight: 600">主辅料定义</span>
            </div>
            <div class="flex add">
              <div class="flex item">
                <span class="f14" style="width: 90px">分类编码</span>
                <el-input class="input" placeholder="" disabled />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">分类名称</span>
                <el-input class="input" placeholder="" disabled />
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">主辅料</span>
                <el-select v-model="value" filterable placeholder="冲裁辅料">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
              <div class="flex item">
                <span class="f14" style="width: 90px">通用</span>
                <el-select v-model="value" filterable placeholder="通用">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <div class="btns">
        <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
        <el-button type="primary" size="default" @click="">打印</el-button>
      </div>
    </main>

    <Customer v-if="classifyList[1].active === true" />

    <Manufacturer v-if="classifyList[2].active === true" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Customer from './customer.vue'
import Manufacturer from './manufacturer.vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Classify'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const classifyList = ref([
  {
    label: '材料分类',
    active: true
  },
  {
    label: '客户分类',
    active: false
  },
  {
    label: '厂商分类',
    active: false
  }
])
interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
]

const defaultProps = {
  children: 'children',
  label: 'label'
}

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const changePage = (e: any) => {
  console.log(e.target)
  const label = e.target.innerText
  if (label === '材料分类') {
    classifyList.value.forEach((item) => (item.active = false))
    classifyList.value.find((item) => item.label === label)!.active = true
  }
  if (label === '客户分类') {
    classifyList.value.forEach((item) => (item.active = false))
    classifyList.value.find((item) => item.label === label)!.active = true
  }
  if (label === '厂商分类') {
    classifyList.value.forEach((item) => (item.active = false))
    classifyList.value.find((item) => item.label === label)!.active = true
  }
}
</script>

<style lang="less" scoped>
.classify {
  width: 100%;
  align-items: center;
  background-color: white;

  .classifyItem {
    width: 88px;
    line-height: 50px;
    text-align: center;
  }

  .classifyItem.active {
    color: #f89027;
    border-bottom: #f89027 2px solid;
  }
}

main {
  background-color: white;
  justify-content: space-between;

  .tree {
    width: 336px;
    border: 1px solid #e6e6e6;
    margin: 13px 10px 15px;
  }

  .add {
    flex-direction: column;

    .item {
      align-items: center;
      margin-top: 15px;
    }

    .item.btn {
      justify-content: space-between;
    }
  }

  .btns {
    display: flex;
    align-items: flex-end;
    margin: 10px 20px 10px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
